<template>
  <div class="krcl">
    <el-card shadow="never">
      <div slot="header" class="header">
        <span>自动化扩容处理</span>
        <el-button size="small" type="primary" @click="dialogVisible = true"
          >新增自动扩容</el-button
        >
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="发布名称"> </el-table-column>
        <el-table-column prop="speace" label="分区名称"> </el-table-column>
        <el-table-column prop="min" label="最小副本"> </el-table-column>
        <el-table-column prop="max" label="最大副本"> </el-table-column>
        <el-table-column prop="zbname" label="指标名称"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="
                dialogVisibleA = true
                handleUpdate(scope.row)
              "
              >更新</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      title="更新自动扩容"
      :visible.sync="dialogVisibleA"
      width="60%"
      top="10vh"
    >
      <el-form size="small" label-width="100px" inline>
        <el-form-item label="最小副本">
          <el-input v-model="form.min"></el-input>
        </el-form-item>
        <el-form-item label="最大副本">
          <el-input v-model="form.max"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleA = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogVisibleA = false
            $message({
              message: '更新成功',
              type: 'success'
            })
          "
        >
          确 定
        </el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="新增自动扩容"
      :visible.sync="dialogVisible"
      width="60%"
      top="10vh"
    >
      <el-scrollbar>
        <Card title="分区设置">
          <el-form size="small" label-width="100px" inline>
            <el-form-item label="选择名称">
              <el-select placeholder="请选择" v-model="form.valA">
                <el-option label="dis-fg-product" :value="1"> </el-option>
                <el-option label="hj-dg-product" :value="2"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发布名称">
              <el-select placeholder="请选择" v-model="form.valB">
                <el-option label="jkl-dev-product" :value="1"> </el-option>
                <el-option label="hj-buddy-product" :value="2"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="最小副本">
              <el-input v-model="form.valC"></el-input>
            </el-form-item>
            <el-form-item label="最大副本">
              <el-input v-model="form.valD"></el-input>
            </el-form-item>
          </el-form>
        </Card>
        <Card title="指标采集">
          <el-form size="small" label-width="100px" inline>
            <el-form-item label="指标类型">
              <el-select placeholder="请选择" v-model="formA.valA">
                <el-option label="资源类指标" :value="1"> </el-option>
                <el-option label="自定义指标" :value="2"> </el-option>
              </el-select>
            </el-form-item>
            <div v-if="formA.valA">
              <el-form-item label="名称">
                <el-select placeholder="请选择" v-model="formA.valB">
                  <el-option label="CPU" :value="1"> </el-option>
                  <el-option label="MEMARY" :value="2"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="目标占用率">
                <el-input v-model="formA.valC"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </Card>
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogVisible = false
            $message({
              message: '新增成功',
              type: 'success'
            })
            add()
          "
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Card from '@/components/Card'
export default {
  components: {
    Card
  },
  data() {
    return {
      dialogVisible: false,
      dialogVisibleA: false,
      form: {},
      formA: {
        valA: '',
        valB: '',
        valC: '',
        valD: ''
      },
      tableData: []
    }
  },

  methods: {
    add() {
      this.tableData.push({
        name: 'jkl-dev-product',
        speace: 'bboss',
        min: 1,
        max: 2,
        zbname: 'CPU'
      })
    },
    handleUpdate(row) {
      this.form = row
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/deep/.el-dialog__body {
  height: 66vh;
}
</style>
